<template>
    <div>
        <div id="map_container"></div>
    </div>
</template>

<script>
    import {BMPGL} from "../../utils/bmp"
    // 创建script标签，引入外部文件

    export default {
        name: "Item1",
        data() {
            return {
                ak: 'kCdsmR8yHuGYzZzlp6GiUyxTUZmYawoC'
            }
        },
        mounted() {

            this.initMap()
        },
        methods: {
            initMap() {
                BMPGL(this.ak).then((BMapGL) => {
                    let map = new BMapGL.Map("map_container");
                    let point = new BMapGL.Point(113, 23)
                    map.centerAndZoom(point, 6)
                    map.enableScrollWheelZoom(true)
                    map.setHeading(0)
                    //倾斜度
                    map.setTilt(30)

                    var citys = ['北京', '上海', '深圳', '福州','合肥','南京','成都','重庆']
                    var data = []
                    var count = 20
                    while (count--) {
//    构造数据
                        var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)])
                        var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)])
                        var curve = new mapvgl.BezierCurve({
                            start: [startPoint.lng, startPoint.lat],
                            end: [endPoint.lng, endPoint.lat]
                        });
                        const curveData = curve.getPoints()

                        //生成数据
                        data.push({
                            geometry: {
                                type: 'LineString',
                                coordinates: curveData
                            },
                            properties: {
                                color: `rgb(${Math.floor(Math.round() * 255)},${Math.floor(Math.round() * 255)},${Math.floor(Math.round() * 255)})`
                            }
                        })
                    }

                    var view = new mapvgl.View({
                        map: map
                    });
                    var layer = new mapvgl.FlyLineLayer({
                        style: 'chaos',
                        step: 0.5,
                        color: 'rgba(255, 0, 0, 1)',
                        textureColor: function (data) {
                            return data.properties.color
                        },
                        textureWidth: 10,
                        textureLength: 70,
                    });
                    view.addLayer(layer);
                    layer.setData(data)
                })
                    .catch((err) => {
                        console.log(err)
                    })
            },
        }
    }
</script>

<style scoped>


    #map_container {
        position: absolute;
        left: 0;
        width: 100%;
        height: 90vh;
    }
</style>
